@import './fonts.css';
@import './main.less';

@color-primary: #00C8B4;
@defualt-bg:#F7F7F7;
@danger-color:#f15643;
@warning-color :#FFAB00;


//导航设置
.main-color{
    color:#16BC83;
}
.van-nav-bar{
    &.van-nav-bar--fixed{
        z-index: 99999;
    }
    .van-nav-bar__content{
        height: 46PX;
    }
    &.van-hairline--bottom::after{
        border: 0;
    }
    .van-nav-bar__left{
        padding: 0 12PX;
        font-size: 18PX;
        font-family: 'PFZH';
        font-weight: normal;
        .left-bar{
            display: flex;
            align-items: center;
        }
    }
    i{
        &:extend(.color_text_gray3);
    }
    .van-nav-bar__right{
        height: 100%;
        padding: 0 12PX;
        display: flex;
        align-items: center;
        .right-bar{
            position: relative;
            display: flex;
            justify-content: space-around;
            width: 80PX;
            height: 30PX;
            padding: 0 6PX;
            border-radius:15PX;
            align-items: center;
            background-color: rgba(255, 255, 255, .3);
            box-sizing: border-box;
            &:extend(.icon_gray_black);
            span{
                width: 1PX;
                height: 18PX;
                display: inlie-block;
                background: rgba(255, 255, 255, .6);
            }
            svg{
                font-size: 22PX;
            }
            .icon-home{
                display: flex;
                align-items: center;
                width: 20PX;
                height: 20PX;
                img{
                    width:18PX;
                    height:18PX;
                }
            }
            .icon-close{
                display: flex;
                align-items: center;
                width: 20PX;
                height: 20PX;
                /* background-image:url('../assets/image/icon_close.png');
                background-repeat: no-repeat;
                background-position: center;
                background-size: 20px 20px; */
                img{
                    width: 19PX;
                    height: 19PX;
                }
            }
        }
    }
}
.custom-van-pop{
    width: 80%; 
    border-radius: 6px;
    .van-popup__close-icon--top-right{
        margin-top:0;
        top: 0;
        right: 0;
        width:50px;
        height: 44px;
        line-height: 44px;
        text-align: center;
    }
}
*{  
    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/  
    -webkit-user-select:none; /*webkit浏览器*/  
    -khtml-user-select:none; /*早期浏览器*/  
    -moz-user-select:none;/*火狐*/  
    -ms-user-select:none; /*IE10*/  
    user-select:none;  
} 
input,textarea {
    -webkit-user-select:auto; /*webkit浏览器*/
    margin: 0px;
    padding: 0px;
    outline: none;
}
*{ -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids */ }


.wrapper{
    padding: 0 10px 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    background: #fff;
    &:last-child{
        margin-bottom: 0;
    }
}
.main-title{
    padding:15px 0;
    line-height: 22px;
    font-size: 16px;
    letter-spacing: 1.5px;
    color: #333333;
    font-family: 'PFZH';
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.color-red{
    color: #F15643;
}
.color-blue{
    color: #3D98F1;
}
.color-green{
    color: #12B9A3;
}
.color-yellow{
    color: #FDBD43;
}
.color-greens{
    color: #12ADB9;
}
.color-99{
    color: #999999;
}

.mt10{
    margin-top: 10px;
}
.fw-normal{
    font-weight: normal;
    font-family:PingFang-Regular;
}

.sub-title{
    padding: 10px;
    box-sizing: border-box;
    height: 44px;
    display: flex;
    align-items: center;
    font-size:14px;
    font-weight:500;
    color:rgba(0,0,0,.8);
    background-color: white;

    &::before{
        content: '';
        display: block;
        width:14px;
        height:14px;
        background-color: #16bc83;
        border: 3px solid #b9ebd9;
        border-radius: 100%;
        margin-right: 8px;
    }

    &.orage::before{
        background-color: #ffab00;
        border-color: #ffe5b2;
    }

    margin-bottom: 1px;
}
.core-time{
    padding: 0 5px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:100px;
    height:22px;
    border-radius: 6px;
    background: #F5F6F7;
    font-size: 12px;
    letter-spacing: 1px;
    color: #999999;
    font-family: 'PingFang-Regular';
    .svg-icon{
      font-size: 16px;
      color: #999;
    }
  }

.chart-dot{
    display: flex;
    align-items: center;
    line-height: 18px;
    font-size: 12px;
    color: #888888;
    letter-spacing: 1px;
    font-family: PFZH;
    .dot{
        display: flex;
        align-items: center;
        margin-left: 10px;
        min-height: 18px;
        &::before{
            content: '';
            width: 14px;
            height: 14px;
            border-radius: 100%/100%;
            background: #fff;
            box-sizing: border-box;
            margin-right: 4px;
        }
        &.green::before{
            border: 2px solid #12B9A3;
        }
        &.yellow::before{
            border: 2px solid #FEB81D;
        }
        &.red::before{
            border: 2px solid #F15643;
        }
        &.blue::before{
            border: 2px solid #3D98F1;
        }
        &.unselect::before{
            border: 2px solid #999;
        }
    }
    &.bar{
        .dot{
           &:before{
                border-radius: 0;
            } 
            &.green::before{
                background-color: #12B9A3;
            }
            &.yellow::before{
                background-color: #FEB81D;
            }
            &.unselect::before{
                background-color: #999;
            }
        }
    }
}
.echart-tooltip-content{
    line-height: 26PX;
    letter-spacing: 1PX;
    font-size: 12PX;
}
.custom-calendar{
    height:65%;
    border-radius:8px 8px 0 0 !important;
    .van-calendar__header-title{
        font-weight: bold;
    }
    .van-calendar__month-title{
        background: #F5F6F7;
    }
    .van-calendar__day{
        height: 40PX;
    }
    .van-calendar__selected-day{
        width:40PX;
        height:40PX;
    }
    .van-button--round{
        border-radius:8px !important
    }
    
}
.no-data{
    width: 100%;
    color: #999;
    line-height: 36px;
    text-align: center;
}

.banner{
    font-size: 0;
    img{
      width: 100%;
      height: auto;
    }
}
.main-page{
    padding: 0 12px 12px;
}
// 核心指标
.main-core-page{
    position: relative;
    padding:0 12px 12px;
    margin-top: -20px;
    .icon-tip{
      position: absolute;
      z-index: 1;
      top: -9px;
      width: 10px;
      height: 18px;
      background: #FFFFFF;
      border-radius: 6px;
      box-sizing: border-box;
      border: 2px solid #12B9A3;
      &.left{
        left:24px
      }
      &.right{
        right: 24px;
      }
    }
  }

// 页面tab标题
.tab-titles{
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    .tab-box{
        position: relative;
        display: flex;
        padding:10px 0;
        height: 50px;
        border-radius: 6px;
        box-sizing: border-box;
        font-family: 'PFZH';
        font-size: 14px;
        background: #FFFFFF;
        &.has-sub{
            border-radius: 6px 6px 0 0 ;
            &::after{
                position: absolute;
                content: '';
                left: 0;
                right: 0;
                bottom: 0;
                height: 1px;
                background: #F5F6F7;;
            }
        }
        .tab{
            flex: 1;
            margin: 0 5px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #888888;
            span{
                display: inline-block;
                width: 100%;
                height: 30px;
                margin:0 auto;
            }
            &.active span{
                color: #FFFFFF;
                background: #12B9A3 !important;
                box-shadow: 0px 2px 4px 0px rgba(18, 185, 163, 0.3);
                border-radius: 6px;
            }
        }
    }
    &.is_fixed{
        position:fixed;
        left: 0;
        right: 0;
        top: 46PX;
        z-index: 999;
        background: #FFFFFF;
        .tab-box{
            border-radius: 0;
            &::after{
                position: absolute;
                content: '';
                left: 0;
                right: 0;
                bottom: 0;
                height: 1px;
                background: #F5F6F7;;
            }
            .tab span{
                background: #F5F6F7;
            }
        }
    }
}
.tab-titles.is_fixed~.tab-page-content{
    padding-top:50px
}
// 二级tab
.tab-subpage{
    .sub-tab-title{
      display: flex;
      margin: 0 12px;
      box-sizing: border-box;
      font-size: 14px;
      border-radius:0 0 6px 6px;
      background: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
      .tab{
        flex: 1;
        height: 46px;
        line-height: 46px;
        text-align: center;
        color: #888888;
        span{
          padding: 0 10px;
        }
        &.active{
          font-family: 'PFZH';
          color: @color-primary;
        }
      }
    }
    .sub-tab-content{
        padding-top: 10px;
    }
  }
  .tab-titles.is_fixed~.tab-page-content .tab-subpage{
      padding-top: 46px;
      .sub-tab-title{
          position: fixed;
          z-index: 99;
          top: 46PX;
          left: 0;
          right: 0;
          margin: 0;
          padding-left: 12px;
          padding-right: 12px;
          padding-top: 50px;
          border-radius: 0;
      }
  }